<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="550" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineCap = 'round';

        // Coordinates
        const groundY = 370;
        const boxFloorY = 350;
        const boxTopY = 180;
        const boxLeftX = 100;
        const boxRightX = 450;
        
        const sliderWidth = 45;
        const sliderHeight = 60;
        const sliderX = 150;
        const sliderY = boxFloorY - sliderHeight;

        // Draw Ground Line
        ctx.beginPath();
        ctx.moveTo(50, groundY);
        ctx.lineTo(500, groundY);
        ctx.stroke();

        // Draw Box (U-shape)
        // Replicating the simple line style of the original diagram.
        ctx.beginPath();
        // Left wall
        ctx.moveTo(boxLeftX, boxTopY);
        ctx.lineTo(boxLeftX, groundY);
        // Right wall
        ctx.moveTo(boxRightX, boxTopY);
        ctx.lineTo(boxRightX, groundY);
        // Floor of the box
        ctx.moveTo(boxLeftX, boxFloorY);
        ctx.lineTo(boxRightX, boxFloorY);
        ctx.stroke();

        // Draw Slider Block
        ctx.beginPath();
        ctx.rect(sliderX, sliderY, sliderWidth, sliderHeight);
        ctx.stroke();
        
        // --- Draw Labels and Vectors ---

        // Mass 'm' for slider
        ctx.font = "italic 22px 'Times New Roman'";
        ctx.textAlign = 'center';
        ctx.fillText("m", sliderX + sliderWidth / 2, sliderY - 10);
        
        // Mass 'm' for box
        ctx.textAlign = 'left'; 
        ctx.fillText("m", boxRightX + 15, boxFloorY - 15);

        // Velocity vector v₀
        const arrowStartX = sliderX + sliderWidth;
        const arrowStartY = sliderY + sliderHeight / 2;
        const arrowEndX = arrowStartX + 100;
        const arrowHeadLength = 10;

        // Arrow line
        ctx.beginPath();
        ctx.moveTo(arrowStartX, arrowStartY);
        ctx.lineTo(arrowEndX, arrowStartY);
        // Arrowhead
        ctx.moveTo(arrowEndX, arrowStartY);
        ctx.lineTo(arrowEndX - arrowHeadLength, arrowStartY - arrowHeadLength / 2);
        ctx.moveTo(arrowEndX, arrowStartY);
        ctx.lineTo(arrowEndX - arrowHeadLength, arrowStartY + arrowHeadLength / 2);
        ctx.stroke();

        // Velocity label 'v₀'
        ctx.font = "italic bold 24px 'Times New Roman'";
        ctx.fillText("v", arrowEndX + 10, arrowStartY + 8);
        ctx.font = "italic 16px 'Times New Roman'";
        ctx.fillText("0", arrowEndX + 10 + 13, arrowStartY + 13);

        // Caption at the bottom
        ctx.font = "24px 'KaiTi', 'SimSun'";
        ctx.textAlign = 'center';
        ctx.fillText("力图 3.33.1", canvas.width / 2, groundY + 50);

    </script>
</body>
</html>